<html>
    <head>
        <title>Router</title>
    </head>
    <body>
        <div id="app">
            <p>
                <router-link to="/user/foo">/user/foo</router-link>
                <router-link to="/user/bar">/user/bar</router-link>
            </p>
            <router-view></router-view>
        </div>

        <script src="node_modules/vue/dist/vue.js"></script>
        <script src="node_modules/vue-router/dist/vue-router.js"></script>

        <script>
        const User = {
            template: `<div>User {{ $route.params.id }}</div>`
        }

        const router = new VueRouter({
            routes: [
                { path: '/user/:id', component: User }
            ]
        })

        const app = new Vue({ router }).$mount('#app')
        </script>

    </body>
</html>
 